<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>知识库统计</title>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/it/common/css/style.css"/>
    <!--Layui-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <style>
        .break {
            width: 76%;
            word-break: break-all;
        }

        .pt2px {
            padding-top: 2px;
        }

        .layui-tree-entry:hover {
            background-color: #9EB1FF !important;
        }
        .layui-tree-entry {
            height: 40px;
            line-height: 40px;
        }
    </style>
</head>

<body>
<!--容器-->
<div class="container  clearfix" style="margin-left:3%;width:97%;">
    <!--占位-->
    <div style=" height: 50px;margin-top: 50px;">
        <input class="layui-btn layui-btn-danger layui-btn-sm fl" type="button" value="预览Excel" onclick="viewTable()">
        <input class="layui-btn layui-btn-normal layui-btn-sm fl ml10" type="button" value="导出Excel"
               onclick="exportTable()">
    </div>
    <div class="clearfix" style="margin-top: 0px;padding: 0px;border: 1px solid #E2E3E4;">

        <div class="   fl"
             style="margin-top: 20px;border: 1px solid #E2E3E4;background-color: #F9F9F9;width: 49%;height: 1000px;overflow:scroll;">
                 <div id="test1" class="demo-tree demo-tree-box  fl" style="width: 100%;margin-top: 20px;"></div>
        </div>
        <div class="   fl " style="margin-top: 20px;border: 1px solid #E2E3E4;width: 45%;height: 1000px;background-color: #ffffff;padding: 0 20px;">
            <table id="tableList" class="layui-hide" lay-filter="tableList"></table>
        </div>
    </div>
</div>
<!--JQ-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>
<!--公用样式JS-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js" charset="utf-8"></script>
<script type="text/javascript" src="${re.contextPath}/pageoffice.js" id="po_js_main"></script>
<script type="text/javascript" charset="utf-8" src="/plugin/it/common/js/itkl.js"></script>
<script type="text/javascript" charset="utf-8" src="/plugin/it/common/js/details.js"></script>
<!--选择城市js-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/area.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/select.js"></script>
<!--进度条-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/progress.js"></script>
<!--分页-->
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/jquery.page.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
<!-- js文件 -->
<!-- 加载字体文件样式 -->
<#--<link rel="stylesheet" href="//unpkg.com/eletree/dist/css/icon.css">-->
<#-- eleTree树 -->
<script type="text/javascript" src="${re.contextPath}/plugin/eleTree2.0/eleTree.js" charset="utf-8"></script>
<style>
    .eleTree-title:hover {
        background-color: #9EB1FF !important;
    }
    .eleTree-group .eleTree-node .eleTree-title {
        position: relative;
        line-height: 43px;
    }
    .eleTree-group{
        margin-left: 20px;
    }
</style>
</body>
<script type="text/javascript">
    layui.config({
        base: '${re.contextPath}/plugin/eleTree2.0/eleTree.js'
    });
</script>

<script>
    var tableIns = null;
    //暂存已经查询到的节点，用于后边数据整合（全局变量）
    var temp;
    //暂存已经查询到的节点的id，用于后边节点的展开（全局变量）
    var arrSwjgDm = [];
    //树形填充数据
    var treeData;
    var fileId;
    var layer;

    // 导出时，记录导出选中的id
    var exportId = '';
    // 导出时，记录导出选中的title
    var exportLabel = '';

    layui.use(['eleTree', 'util','layer'], function() {
        var eleTree = layui.eleTree
            , layer = layui.layer
            , util = layui.util

        layerAjax('/search/statistics/selectIT', '', '', function (d) {
            temp=d.data;
            // console.log(temp);
            /*tree.render({
                elem: '#test1', //默认是点击节点可进行收缩
                data: temp,
                showLine: false,
                id:'treeId',
                click: function(obj){
                    $(obj.elem).html();
                    console.log($(obj.elem).html())
                    $(obj.elem).click();
                    console.log($(obj))
                    var id=obj.data.id;
                    //点击节点对应查询右边列表
                    var json={id:id};
                    fileId=obj.data.id;
                    table.reload('tableList', {where: json});
                }
            });*/
            var el = eleTree({
                el: '#test1',
                showCheckbox: false,
                highlightCurrent: false,
                onlyIconControl: false,
                showLine: false,
                lazy: true,
                icon: {
                    loading: ".eleTree-animate-rotate.eletree_icon-loading1",
                },
                data: temp,
                id:'treeId',
            })
            el.on("click",function (obj){
                var id=obj.data.id;
                // console.log('obj',obj)
                exportId = obj.data.id;
                exportLabel = obj.data.label;
                //点击节点对应查询右边列表
                var json={id:id};
                fileId=obj.data.id;
                table.reload('tableList', {where: json});
            })
            el.on('lazyload', function(d) {
                console.log("看看这个懒加载",d.data.id)
                var data = d.data;
                var load = d.load;
                var loadData = [];
                // 查询数据
                layerAjax('/search/statistics/selectChildsByParentId', {'parentId':data.id}, '', function (d) {
                    if (d.flag) {
                        console.log("懒加载回来的数据d", d)
                        loadData = d.data
                        setTimeout(function () {
                            load(loadData)
                        }, 500)
                    }
                })
            })
        });
        tableIns =table.render({
            id: 'tableList',
            elem: '#tableList',
            height: 'full-20',
            url: '/search/statistics/selectitXq',
            cols: [[
                {
                    title: '序号', width: '15%', templet: function (res) {
                        return res.LAY_INDEX;
                    }
                },
                {field: 'id', title: '编号', hide: true, sort: false},
                {field: 'url', title: '目录', width: '46%', sort: false},
                {field: 'fileName', title: '文档名称', width: '40%', sort: false, templet: function (d) {
                        var fileType = reFileType(d.fileName);
                        return '<span class="cursor" style="color: blue;" onclick="detailClick(\'' + d.id + '\',\'' + d.fileName + '\',\'' + fileType + '\')">' + d.fileName + '</span>';
                    }},
            ]],
            page: true,
            done: function (res, currentCount) {

            }
        });
    })

    function reFileType(url) {
        var fileType = "";
        var index = url.lastIndexOf(".");
        var ext = url.substr(index + 1);
        //图片数组
        var imagearray = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'psd'];
        if (imagearray.indexOf(ext.toLowerCase()) !== -1) {
            fileType = "图片";
        }
        var filearray = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'];
        if (filearray.indexOf(ext.toLowerCase()) !== -1) {
            fileType = "文档";
        }
        var pafarray = ['pdf'];
        if (pafarray.indexOf(ext.toLowerCase()) !== -1) {
            fileType = "pdf";
        }

        var pafarray = ['mp4', 'avi', 'wmv', 'mpg', 'rm', 'swf', 'mpeg'];
        if (pafarray.indexOf(ext.toLowerCase()) !== -1) {
            fileType = "视频";
        }
        return fileType;
    }



    function detailClick(id, fileName, spanType) {
        window.parent._showtab('xm_v' + id, fileName, "/search/znSerch/viewDetail?id=" + id + "&type=" + encodeURI(spanType));
    }
    //导出excel
    function exportTable(){
        // 判断是否存在导出的id
        if (exportId === '' || exportLabel === ''){
            layer.alert('请点击需要导出层级',{
                icon: 5,
                title: "警告"
            })
            return false;
        }
        let title = '确定导出 ' + exportLabel + ' 目录以及子目录吗？'
        layer.confirm(title, {
            btn: ['确定','取消'] //按钮
        }, function(index){
            var url= '/search/statistics/exportTable?id='+exportId;
            location.href = url;
            layer.close(index);
            // var myMsg = layer.msg("加载中...",{
            //     icon:16,
            //     time:-1
            // })
        }, function(){

        });
        // layer.close(myMsg);//手动关闭
    }
    //预览excel
    function viewTable(){
        // 判断是否存在导出的id
        if (exportId === '' || exportLabel === ''){
            layer.alert('请点击需要预览层级',{
                icon: 5,
                title: "警告"
            })
            return false;
        }
        layerAjaxGet('/search/statistics/viewTable',{'id':exportId},'',function (res){
            if(res.flag){
                if(res.data){
                    var w = ($(window).width()*0.8);
                    var h = ($(window).height()*0.8);
                    POBrowser.openWindowModeless('/sys/office/openwordTemp?ft=1&fid=' + res.data, 'width=1200px;height=800px;', '{}')
                }
            }
        })


    }

</script>

</html>
